<template>
  <el-menu
    :default-active="activeMenu"
    class="admin-menu"
    router
  >
    <template v-for="item in adminMenuData" :key="item.url">
      <el-sub-menu :index="item.url">
        <template #title>
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.url"
          :index="child.url"
        >
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import adminMenuData from '../../../router/adminMenuData'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.admin-menu {
  height: 100%;
  border-right: none;
}
</style>
